//=============== 头部导航 移入移出 ===============
var oNav = document.getElementsByClassName('site-header')[0];
var aConvertA = document.querySelectorAll('.navbar-container .convert');
var oheaderImg = document.querySelector('.navbar-category .headerImg');
oNav.onmouseover = function () {
    //site-header背景颜色改变
    oNav.style.backgroundColor = "white"
    //图片滤镜-->变黑
    oheaderImg.style.filter = "brightness(0%)"
    var convertAlen = aConvertA.length;
    for (i = 0; i < convertAlen; i++) {
        aConvertA[i].style.color = "black"
    }
}
oNav.onmouseout = function () {
    oNav.style.backgroundColor = ""
    oheaderImg.style.filter = ""
    var convertAlen = aConvertA.length;
    for (i = 0; i < convertAlen; i++) {
        aConvertA[i].style.color = ""
    }
}
//=============== 头部导航左侧 移入移出 ===============
var aCategoryLi = document.querySelectorAll('.navbar-category .convertLi');
var aCategoryLiItem = document.querySelectorAll(".categoryItem");
var aCategoryA = document.querySelectorAll('.navbar-category .convert');
var categoryLiLen = aCategoryLi.length
for (var i = 0; i < categoryLiLen; i++) {
    aCategoryLi[i].index = i;
    aCategoryLi[i].onmouseover = function () {
        aCategoryLiItem[this.index].style.display = "block"
        aCategoryA[this.index].style.borderBottom = "2px solid black";
        switch (this.index) {
            case 0:
                setMaxHeight('.Item1 .grid-top-wrapper .vertical-divider', '.Item1 .grid-bottom-wrapper .vertical-divider', 2, 2);
                break;
            case 1:
                setMaxHeight('.Item2 .grid-top-wrapper .vertical-divider', '.Item2 .grid-bottom-wrapper .vertical-divider', 2, 1);
                break;
            case 2:
                setMaxHeight('.Item3 .grid-top-wrapper .vertical-divider', '.Item3 .grid-bottom-wrapper .vertical-divider', 2, 1);
                break;
            case 3:
                setMaxHeight('.Item4 .grid-top-wrapper .vertical-divider', '.Item4 .grid-bottom-wrapper .vertical-divider', 2, 0);
                break;
            case 4:
                setMaxHeight('.Item5 .grid-top-wrapper .vertical-divider', '.Item5 .grid-bottom-wrapper .vertical-divider', 2, 2);
                break;
            case 6:
                setMaxHeight('.Item7 .grid-top-wrapper .vertical-divider', '.Item7 .grid-bottom-wrapper .vertical-divider', 3, 0);
                break;
        }
    }
    aCategoryLi[i].onmouseout = function () {
        aCategoryLiItem[this.index].style.display = ""
        aCategoryA[this.index].style.borderBottom = "";
    }
}
// =============== 头部导航右侧，用户下拉列表 ===============
var userLi = document.querySelectorAll(".navbar-right li")[2];
var userDropDown = document.querySelector('.user-dropdown');
userLi.onmouseover = function () {
    userDropDown.style.display = "block"
}
userLi.onmouseout = function () {
    userDropDown.style.display = "none"
}
// =============== 头部导航左侧，下拉列表，纵向分隔符动态高度 ===============
function setMaxHeight(TopSelector, BottomSelector, TopAmount, BottomAmount) {//获取元素(top/bottom),个数(top/bottom)
    var aTopColumnsItem = []
    var aTopDivider = document.querySelectorAll(TopSelector);
    var aBottomColumnsItem = []
    var aBottomDivider = document.querySelectorAll(BottomSelector);
    if (TopAmount == 3) {
        for (i = 0; i < TopAmount; i++) {
            aTopColumnsItem.push(aTopDivider[i].previousElementSibling);
        }
        var topMaxHeight = Math.max(aTopColumnsItem[0].clientHeight, aTopColumnsItem[1].clientHeight, aTopColumnsItem[2].clientHeight)
        for (i = 0; i < aTopDivider.length; i++) {
            aTopDivider[i].style.height = topMaxHeight + "px"
        }
    } else {
        for (i = 0; i < TopAmount; i++) {
            aTopColumnsItem.push(aTopDivider[i].previousElementSibling);
        }
        var topMaxHeight = Math.max(aTopColumnsItem[0].clientHeight, aTopColumnsItem[1].clientHeight)
        for (i = 0; i < aTopDivider.length; i++) {
            aTopDivider[i].style.height = topMaxHeight + "px"
        }
    }
    if (BottomAmount == 1) { //判断bottom分隔符的个数
        aBottomColumnsItem.push(aBottomDivider[0].previousElementSibling);

        var bottomMaxHeight = aBottomColumnsItem[0].clientHeight;
        for (i = 0; i < aBottomDivider.length; i++) {
            aBottomDivider[i].style.height = bottomMaxHeight + "px"
        }
    } else if (BottomAmount == 0) {
        return;
    } else {
        for (i = 0; i < 2; i++) {
            aBottomColumnsItem.push(aBottomDivider[i].previousElementSibling);
        }
        var bottomMaxHeight = Math.max(aBottomColumnsItem[0].clientHeight, aBottomColumnsItem[1].clientHeight)
        for (i = 0; i < aBottomDivider.length; i++) {
            aBottomDivider[i].style.height = bottomMaxHeight + "px"
        }
    }
}
// =============== Banner轮播 ===============
var SwiperBanner = new Swiper('#swiperBanner', {
    effect: 'fade',//淡入淡出
    simulateTouch: false,//鼠标不模拟手机触摸
    loop: true,
    navigation: {
        nextEl: '.swiper-banner-next',
        prevEl: '.swiper-banner-prev',
    },
})
var SwiperScroller = new Swiper('#swiperScroller', {
    slidesPerView: 5,
    effect: 'slide',
    speed: 300,
    simulateTouch: false,
    centeredSlides: true,
    direction: 'vertical',
    loop: true,
    navigation: {
        nextEl: '.swiper-scroller-next',
        prevEl: '.swiper-scroller-prev',
    },
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },
    on: {
        slideChangeTransitionStart: function () {
            var iNow = this.realIndex
            SwiperBanner.slideToLoop(iNow, 0, false);
            change();
        },
    },
})
var oNext2 = SwiperScroller.navigation.nextEl;
var oNext1 = SwiperBanner.navigation.nextEl;
var oPrev2 = SwiperScroller.navigation.prevEl;
var oPrev1 = SwiperBanner.navigation.prevEl;
oNext1.addEventListener("click", function () {
    SwiperScroller.slideNext();
})
oPrev1.addEventListener("click", function () {
    SwiperScroller.slidePrev();
})
function change() {
    var oActive = document.querySelector(".swiper-slide-active")
    var oActiveText = oActive.querySelector(".slide-text")
    var aBannerText = document.querySelectorAll(".slide-text")
    var oActiveImg = oActive.querySelector(".slide-img")
    var aBannerImg = document.querySelectorAll(".slide-img")
    var iBannerLen = aBannerText.length
    for (var i = 0; i < iBannerLen; i++) {
        aBannerText[i].classList.remove("ad")
        aBannerImg[i].classList.remove("ap")
    }
    oActiveText.classList.add("ad")
    oActiveImg.classList.add("ap")
}

// =============== promotion 轮播 ===============
var promotionItem_1 = document.querySelector(".item-1");
var promotionItem_2 = document.querySelector(".item-2");
var promotionText_1 = document.getElementById("promotion-text-1");
var promotionText_2 = document.getElementById("promotion-text-2");
function promotionTextAnimation(obj1, obj2) {                     //动画
    obj1.onmouseover = function () {
        obj2.style.transform = "translateY(-10px)"
    }
    obj1.onmouseout = function () {
        obj2.style.transform = ""
    }
}
promotionTextAnimation(promotionItem_1, promotionText_1)
promotionTextAnimation(promotionItem_2, promotionText_2)
// =============== service 移入动画 ===============
var oServiceUl = document.querySelector(".service-wrapper ul");
var aServiceLi = oServiceUl.getElementsByTagName("li")
var aServiceLilen = aServiceLi.length;
for (i = 0; i < aServiceLilen; i++) {
    aServiceLi[i].index = i;
    aServiceLi[i].onmouseover = function () {
        for (i = 0; i < aServiceLilen; i++) {
            aServiceLi[i].style.color = "rgb(121,125,128)";
            aServiceLi[this.index].style.color = "black";
        }
    }
}
oServiceUl.onmouseout = function () {
    for (i = 0; i < aServiceLilen; i++) {
        aServiceLi[i].style.color = "black";
    }
}
// =============== worksShow 动画 ===============
var oWorksShow = document.querySelector(".works-show-wrapper");
var aWorkItem = document.querySelectorAll(".works-show-wrapper>ul>li");
var oNext = document.getElementById("worksNext");
var oPrev = document.getElementById("worksPrev");
aWorkItem[10].style.display = "block"
var x = 11;
oNext.onclick = function () {
    x--;
    if (x == -1) {
        x = 10;
    }
    console.log(x);
    for (i = 0; i < aWorkItem.length; i++) {
        aWorkItem[i].style.display = "none";
        aWorkItem[i].style.transform = "translate3d(0,0,0)";
        aWorkItem[i].style.opacity = 1;
        aWorkItem[i].style.zIndex = 0;
    }
    if (x == 2) {
        worksShow(x, x - 1, x - 2, x + 8)
    } else if (x == 1) {
        worksShow(x, x - 1, x + 9, x + 8)
    } else if (x == 0) {
        worksShow(x, x + 10, x + 9, x + 8)
    } else {
        worksShow(x, x - 1, x - 2, x - 3)
    }
}
oWorksShow.onmouseover = function () {
    if (x == 2) {
        worksShow(x, x - 1, x - 2, x + 8)
    } else if (x == 1) {
        worksShow(x, x - 1, x + 8, x + 7)
    } else if (x == 0) {
        worksShow(x, x + 10, x + 9, x + 8)
    } else {
        worksShow(x, x - 1, x - 2, x - 3)
    }
}
oWorksShow.onmouseout = function () {
    for (i = 0; i < aWorkItem.length; i++) {
        aWorkItem[i].style.transform = "translate3d(0,0,0px)";
    }
}
oPrev.onclick = function () {
    x++
    if (x == 12) {
        x = 1;
    }
    console.log(x);
    for (i = 0; i < aWorkItem.length; i++) {
        aWorkItem[i].style.display = "none";
        aWorkItem[i].style.transform = "translate3d(0,0,0)";
        aWorkItem[i].style.opacity = 1;
        aWorkItem[i].style.zIndex = 0;
    }
    if (x == 2) {
        worksShow(x, x - 1, x - 2, x + 8)
    } else if (x == 1) {
        worksShow(x, x - 1, x + 9, x + 8)
    } else if (x == 11) {
        worksShow(0, x -1, x -2, x - 3)
    } else {
        worksShow(x, x - 1, x - 2, x - 3)
    }
}
function worksShow(num1, num2, num3, num4) {
    aWorkItem[num1].style.zIndex = 400;
    aWorkItem[num1].style.display = "block";
    aWorkItem[num1].style.opacity = "0";
    aWorkItem[num1].style.transform = "translate3d(0,0,15px)";
    aWorkItem[num2].style.zIndex = 300;
    aWorkItem[num2].style.display = "block";
    aWorkItem[num3].style.zIndex = 200;
    aWorkItem[num3].style.display = "block";
    aWorkItem[num3].style.transform = "translate3d(0,0,-15px)";
    aWorkItem[num4].style.zIndex = 100;
    aWorkItem[num4].style.display = "block";
    aWorkItem[num4].style.transform = "translate3d(0,0,-30px)";
}
